<template>
  <view
    class="detailEvaluateStyle"
    @click.stop="$utils.toUrl('/goods/goods/comment?goods_id=' + goodsInfo.id)"
    :style="[outModuleCss]"
  >
    <view :style="[moduleBgCss]" class="module-bg"></view>
    <view class="evaluate-section">
      <view class="evaluate-header">
        <view class="evaluate-title">
          <view class="line"></view>
          <view class="title">{{ $t("goods.evaluate") }}</view>
          <view class="title-num">{{ total > 0 ? total : "" }}</view>
        </view>
        <view class="title-right">
          <view v-if="currentEvaluate.length">{{$t('diy.comments')}}</view>
          <i class="iconfont icon-arrow-right"></i>
        </view>
      </view>
      <view class="evaluate-tab" v-if="currentEvaluate.length">
        <view
          class="tab-item"
          v-for="(item, index) in evaluateTab"
          :key="index"
          >{{ item.text }}</view
        >
      </view>
      <view class="evaluateList" v-if="currentEvaluate.length">
        <commentList :list="currentEvaluate"></commentList>
      </view>

      <view class="btn" v-if="currentEvaluate.length > 0">{{$t('diy.viewComments')}}</view>
      <view class="no-data" v-if="!currentEvaluate.length">
        <view class="no-text">{{$t('diy.noComent')}}～</view>
      </view>
    </view>
  </view>
</template>

<script>
import { diySysPageMixin } from "@/components/diySystemPage/mixins/index.js";
import commentList from "./components/commentList.vue";

export default {
  props: {
    propsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    goodsInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    isRefresh: Boolean,
  },
  components: {
    commentList,
  },
  mixins: [diySysPageMixin],
  data() {
    return {
      // 评价列表
      evaluateList: [],
      // 当前显示的条数
      currentEvaluate: [],
      // 评价总数
      total: 0,
      evaluateTab: [
        {
          text: this.$t('person.cashStatus1'),
          id: "-1",
        },
        {
          text: this.$t('goods.good'),
          id: "3",
        },
        {
          text: this.$t('goods.general'),
          id: "2",
        },
        {
          text: this.$t('goods.bad'),
          id: "1",
        },
      ],
    };
  },
  computed: {},
  watch: {
    isRefresh(e) {
      if (e == true) {
        this.getEvaluateList({
          goods_id: this.goodsInfo.id,
          page: 1,
        });
      }
    },
  },
  methods: {
    handleTabItem(id) {
      this.evaluateList = [];
      this.getEvaluateList({
        goods_id: this.goodsInfo.id,
        page: 1,
        score: id,
      });
    },
    // 点击评价图片预览图片
    preview(index, list) {
      uni.previewImage({
        current: index,
        urls: list,
      });
    },
    // 对商品评价分页
    paging() {
      if (this.evaluateList.length > 2) {
        let arr = this.evaluateList.splice(0, 2);
        this.currentEvaluate = [...this.currentEvaluate, ...arr];
      } else {
        this.currentEvaluate = [...this.currentEvaluate, ...this.evaluateList];
        this.evaluateList = [];
      }
    },
    // 获取商品评价
    async getEvaluateList(params) {
      try {
        const res = await this.$allrequest.goods.commentList(params);
        if (res.code == 0) {
          this.evaluateList = res.data.list.slice(0, 2);
          this.currentEvaluate = res.data.list.slice(0, 2);
          this.total = res.data.row_count;
          // this.paging();
        }
      } catch (e) {
      }
    },
  },
  created() {
    this.getEvaluateList({
      goods_id: this.goodsInfo.id,
      page: 1,
    });
  },
};
</script>

<style scoped lang="less">
.detailEvaluateStyle {
  position: relative;
  width: 100%;
  border-radius: 20rpx;

  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
  .evaluate-section {
    width: 100%;
    padding-bottom: 4.33vw;
  }
  .evaluate-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4.267vw 4.8vw 0 4.8vw;
    .evaluate-title {
      display: flex;
      align-items: center;
      .line {
        width: 6rpx;
        height: 4vw;
        background: #f1270d;
        margin-right: 1.067vw;
      }
      .title {
        font-size: 30rpx;
        font-weight: 600;
        color: #262626;
        margin: 0 1.067vw 0 0;
      }
      .title-num {
        font-size: 20rpx;
        font-weight: 600;
        color: #262626;
        margin-bottom: 0;
      }
    }
    .title-right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 24rpx;
      font-weight: 400;
      color: #8c8c8c;
      .iconfont {
        color: #000000;
        font-size: 22rpx;
        position: relative;
      }
    }
  }
  .evaluate-tab {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 3.46vw;
    padding: 0 4.8vw;
    .tab-item {
      height: 6.93vw;
      margin-right: 2.67vw;
      padding: 0 3.73vw;
      line-height: 6.93vw;
      text-align: center;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #262626;
      background: #fdf1f0;
      border-radius: 3.465vw;
    }
    .tab-item:last-child {
      margin-right: 0;
    }
  }
  .evaluateItem {
    padding: 30rpx 0;
    border-bottom: 1px solid #f2f2f2;
    .head {
      display: flex;
      align-items: center;
      .userPic {
        width: 60rpx;
        min-width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .userInfo {
        margin-left: 10rpx;
        display: flex;
        flex-direction: column;
        .userName {
          font-size: 26rpx;
        }
        .starList {
          display: flex;
          align-items: center;
          margin-top: 10rpx;
          .star {
            width: 18rpx;
            height: 18rpx;
            margin-right: 4rpx;
          }
        }
      }
    }
    .content {
      .evaluateContent {
        font-size: 26rpx;
        font-weight: 500;
        margin: 20rpx 0 10rpx 0;
      }
      .picList {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .picItem {
          width: 164rpx;
          height: 164rpx;
          margin-right: 4rpx;
          margin: 10rpx 4rpx 10rpx 0;
          overflow: hidden;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .picItem:first-child {
          border-radius: 10rpx 0 0 10rpx;
        }
        .picItem:last-child {
          border-radius: 0 10rpx 10rpx 0;
        }
        .picitem:nth-child(4n + 1) {
          border-radius: 10rpx 0 0 10rpx;
        }
        .picitem:nth-child(4n) {
          border-radius: 0 10rpx 10rpx 0;
        }
      }
    }
  }
  .evaluateItem:last-child {
    border-bottom: none;
  }
  .btn {
    width: 230rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border: 1px solid #9b9b9b;
    border-radius: 30rpx;
    font-size: 24rpx;
    font-weight: 400;
    font-family: PingFang SC;
    color: #262626;
    margin: 20rpx auto 0 auto;
  }
  .no-data {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 3.46vw;
    .no-text {
      font-size: 13px;
      font-weight: 400;
      color: #8c8c8c;
    }
  }
}
</style>
